<template>
  <div class="singer" v-if="singers">
    <div class="header">
      <img :src="singers.cover" />
      <div class="text">
        {{ singers.name }}
      </div>
    </div>

    <div class="main">
      <h2>歌手简介</h2>

      <p ref="p">
        {{ this.singers.briefDesc }}
      </p>

      <div class="btn" @click.stop="down">
        完整歌手介绍
        <span
          :class="[
            'iconfont',
            { 'icon-xiangxia': !flag },
            { 'icon-xiangshang': flag },
          ]"
        ></span>
      </div>
    </div>

    <div class="footer">
      <h2>热门单曲</h2>
      <music-list
        v-if="hotSong.length > 0"
        :musiclist="hotSong"
        :shownum="true"
        :currentmusic="currentmusic"
        @play="$emit('play', $event)"
      ></music-list>
      <load-animate v-else></load-animate>
    </div>
  </div>
</template>

<script>
import LoadAnimate from "../components/LoadAnimate.vue";
import MusicList from "../components/MusicList.vue";
import "animate.css";

// this.$router.params.singerid
export default {
  components: { LoadAnimate, MusicList },
  props: {
    singerid: {
      type: String,
      default: "0",
    },
    currentmusic: {
      type: Object,
      default: () => {
        return null;
      },
    },
  },
  data() {
    return {
      singers: null,
      hotSong: [],
      flag: false,
    };
  },
  created() {
    this.axios.get("/artist/detail?id=" + this.singerid).then((re) => {
      this.singers = re.artist;
      // console.log(this.singers);
    });

    this.axios.get("/artist/top/song?id=" + this.singerid).then((re) => {
      // this.hotSong = re.songs;
      console.log(this.hotSong);
      this.hotSong = re.songs.map((item) => {
        console.log(item);
        item.song = {
          alias: item.alia,
          privilege: item.privilege,
          artists: item.ar,
          album: item.al,
        };
        return item;
      });
    });
  },
  methods: {
    down() {
      this.flag = !this.flag;
      if (this.flag) {
        this.$refs.p.style.height = "auto";
      } else {
        this.$refs.p.style.height = "100px";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.singer {
  .header {
    position: relative;
    img {
      height: 305px;
    }
    .text {
      position: absolute;
      top: 70%;
      left: 10px;
      color: #fff;
      font-size: 20px;
      line-height: 20px;
    }
  }

  .main {
    padding: 10px 10px;
    h2 {
      font-size: 18px;
      margin-top: -5px;
      padding: 15px;
      background: #fff;
      font-weight: 700;
    }

    p {
      padding: 0px 15px;
      color: #666;
      height: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .btn {
      font-size: 14px;
      color: #666;
      text-align: center;
      margin-top: 25px;
    }
  }

  .footer {
    h2 {
      font-size: 18px;
      margin-top: -5px;
      padding: 15px;
      background: #fff;
      font-weight: 700;
    }
  }
}
</style>